<template>
	<div class="lietou-detail content">
		<div class="detail-bg"></div>
		<div class="lietou-right">
			<breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
			
			<div class="lietou-detail-head">
				<h2 class="lietou-detail-h1">工人列表</h2>
				<el-table header-row-class-name="my-table-header" :data="tableData" class="answerTable"
				 :header-cell-style="{ background: '#eee',color:'#555555'}" stripe :row-style="{height:'48px'}"
				 :highlight-current-row="true">
					<el-table-column fixed type="index" label="序列" width="50" column-key="id" align="center"></el-table-column>
					<el-table-column prop="wname" label="姓名" align="center"></el-table-column>
					<el-table-column prop="wmobile" label="手机号" align="center"></el-table-column>
					<el-table-column prop="age" label="年龄" width="50" align="center"></el-table-column>
					<el-table-column label="性别" width="50" align="center">
						<template slot-scope="scope">
							<span>{{scope.row.sex==1?'男':'女'}}</span>
						</template>
					</el-table-column>
					<el-table-column label="工作意向" align="center">
						<template slot-scope="scope">
							<span v-for="item in scope.row.job" :key="item">{{item}} </span>
						</template>
					</el-table-column>
					<el-table-column label="职位/工种" align="center">
						<template slot-scope="scope">
							<span>{{scope.row.worktype==1?'长期工':scope.row.worktype==2?'临时工':'均可'}}</span>
						</template>
					</el-table-column>
					<el-table-column label="工作城市" align="center">
						<template slot-scope="scope">
							<span v-for="(item,index) in scope.row.city" :key="item[1]">{{item[1]}} </span>
						</template>
					</el-table-column>
					<el-table-column prop="starttime" label="工龄" width="50"></el-table-column>
					<el-table-column prop="wcontent" label="工人介绍" align="center" show-overflow-tooltip></el-table-column>
					<el-table-column prop="wrealname" label="真实姓名" align="center"></el-table-column>
				
					<el-table-column align="center" label="身份证照片" width="150">
						<template slot-scope="scope">
							<el-image class="idImg" :src="scope.row.card1" fit="scale-down" v-if="scope.row.card1!='0'"></el-image>
							<el-image class="idImg" :src="scope.row.card2" fit="scale-down" v-if="scope.row.card2!='0'"></el-image>
							<el-image class="idImg" :src="scope.row.card3" fit="scale-down" v-if="scope.row.card3!='0'"></el-image>
						</template>
					</el-table-column>
				</el-table>
				<el-row type="flex" class="row-bg" justify="center" v-show="pageCount>1">
					<el-col :span="24" style="text-align:center;margin-top:50px">
						<el-pagination background layout="prev, pager, next" :page-size="pageSize" :page-count="pageCount" :current-page="pageNo"
						 @current-change="pageChange">
						</el-pagination>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import Breadcrumb from '@/components/Breadcrumb'
	export default {
		name: 'LietouWokersList',
		components:{
			Breadcrumb
		},
		computed: {
			...mapGetters([
				'token'
			])
		},
		data() {
			return {
				searchPhone: '', 
				nickname:'',
				tableData: [], //表格数据
				pageCount: 0,
				pageNo: 1,
				pageSize: 10,
				lietouId:'',//猎头id
			}
		},
		watch:{
		  //  '$route': function(newUrl,oldUrl){
				// if(oldUrl.name=='lietouList'){ //详情页面返回的
				// 	if(oldUrl.params.refresh){
				// 	  this.loadData();
				// 	}
				// }
		  //  }
		},
		async created() {
			this.lietouId = this.$route.query.id;
			this.loadData();
		},
		methods:{
			// 搜索
			searchData(){
				this.pageNo=1;
				this.loadData();
			},
			//分页
			pageChange(val) {
				this.pageNo = val;
				this.loadData()
			},
			async loadData() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.5)'
				});
				try {
					let res = await this.$http({
						url: '/man/worker/getList',
						method: 'post',
						params: {
							"token": this.token,
							"lid": this.lietouId,
							"p": this.pageNo,
							"size": this.pageSize
						}
					});
					this.pageCount = res.max_page; //总页数
					this.pageNo = Number(res.p); //当前页 size当前页
					this.tableData = res.data;
					loading.close();
				} catch (e) {
					console.log(e)
					loading.close();
				}
			},
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.el-button.buttonStyle{
	  height: 32px;
	  font-size: 14px;
	  font-family: PingFangSC-Medium, PingFang SC;
	  font-weight: 500;
	  color: #FFFFFF;
	  background:#3674FF;
	  border-radius: 5px;
	  border:0;
	  margin-left:6px;
	  margin-top:2px;
	}
	.answerTable{
		margin-top:15px;
		margin:0 auto;
		width:96%;
	}
	.lietou-detail-h1{
		font-size:18px;
		font-weight: bold;
		padding:20px 16px 6px;
	}
	.lietou-detail{
		background-color: rgb(240, 242, 245);
		position: relative;
		
		.detail-bg {
		  position: fixed;
		  top: 0px;
		  left: 0;
		  bottom:0;
		  right: 0;
		  background: #f4f4f4;
		}
		
	}
	.lietou-detail-head{
		background-color: #fff;
		margin:0 0 20px 0px;
		padding-bottom:25px;
		position: relative;
		min-width:800px;
	}
	.idImg{
		width: 80px; 
		height: 50px;
		margin:0 3px;
	}
</style>
